<template>
    <div>
        <!-- 顶部左右滑动导航 -->
        <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <!-- 标签身上原本是 click 事件，在移动端虽然是 vue 框架，但是这个存在兼容性问题 ，根源不晓得，不知道是因为 mui 组件内部有冲突还是什么(还是 mui 内冲突的可能性大)，解决办法就是用 mui 组件自己的 tap 事件-->
                    <a :class="['mui-control-item',v.id === 0 ? 'mui-active' : '']" v-for="v of category" :key="v.id" @tap="getImgList(v.id)">
                        {{ v.title }}
                    </a>
                </div>
            </div>
        </div>

        <!-- 图片列表 -->
        <ul class="img-list-box">
            <router-link tag="li" :to="'/home/imglist/img/' + v.id" v-for="v in imgList" :key="v.id" class="img-list">
                <div class="img-lazy">
                    <img v-lazy="v.img_url">
                </div>
                <div class="img-list-cont">
                    <p class="img-list-title">{{ v.title }}</p>
                    <p class="img-list-zhaiyao">{{ v.zhaiyao }}</p>
                </div>
            </router-link>
        </ul>

    </div>
</template>

<script>
    import mui from "../../lib/mui/js/mui.min.js"; //---> 这东西放全局无法在 mounted() 钩子里渲染
    // 导入后，初始化 scroll 控件，但是不能在这里直接初始化，这跟 vue 的创建过程有关(dom渲染)，需要借助生命周期钩子来初始化该过程
    /* mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    }); */
    
    export default {
        data () {
            return {
                category: [],
                imgList: [],
            }
        },
        created () {
            this.getImgCategory();
            this.getImgList(0);
        },
        methods: {
            getImgCategory () {
                this.$http.get('api/getimgcategory').then(res => {
                    if ( res.body.status === 0 ) {
                        // this.category = res.body.message.unshift( {id:0,title:'全部'} );  一口吃不了个胖子，这么写也是醉了，哈哈
                        this.category = res.body.message;
                        this.category.unshift( {id:0,title:'全部'} );
                    } else {
                        this.$toast('获取category失败')
                    }
                })
            },
            getImgList (categoryid) {
                this.$http.get('api/getimages/' + categoryid ).then(res => {
                    if (res.body.status === 0) {
                        this.imgList = res.body.message;
                    } else {
                        this.$toast('图片列表获取失败');
                    }
                })
            },
        },
        mounted () {
            mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 });
        },
    }

</script>

<style lang="scss" scoped>
    // 本来这个属性样式时想解决报错问题，结果导致移动端无法滑动页面，属性还是比较新，移动端谷歌63.x都不支持
    // 应该是 * 的原因，换成选择器
    // * { touch-action: none; }
    #slider { touch-action: pan-x; } //也可以

    .img-list-box {
        margin: 0;
        padding: 0 10px;
        list-style: none;
        .img-list {
            margin-bottom: 10px;
            box-shadow: 0 0 6px 1px #888;
            position: relative;
            .img-lazy {
                text-align: center; //懒加载图标默认水平没有居中，垂直方向默认是居中的，一般不去动这个懒加载的标签，单独给个盒子去做这个工作
            }
            img[lazy=loading] {
                width: 40px;
                height: 300px;
                margin: auto;
            }
            img {
                width: 100%;
                vertical-align: top;
            }
            .img-list-cont {
                position:absolute;
                bottom:0;
                height: 84px;
                background-color: rgba(0, 0, 0, 0.4);
                overflow: hidden;
                padding: 0 3px;
                p {
                    margin-bottom: 0;
                    color: #fff;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow:hidden;
                }
                .img-list-title {
                    -webkit-line-clamp: 1;
                    font-weight: 800;
                }
                .img-list-zhaiyao {
                    font-size: 12px;
                    -webkit-line-clamp: 3;
                }
            }
        }
    }
</style>